<template>
	<view class="page">
		<view class="test-content">
			<text class="test-title">{{ studentName }}的过往成绩分析</text>
			
			<!-- 使用通用科目选择器 -->
			<SubjectSelector 
				:selectedSubject="selectedSubject" 
				:subjects="subjects"
				@subject-change="handleSubjectChange"
			/>
			
			<!-- 年级选择器 -->
			<view class="grade-section">
				<text class="grade-label">年级：</text>
				<view class="grade-list">
					<view 
						class="grade-option"
						v-for="grade in grades"
						:key="grade.id"
						@click="toggleGrade(grade.id)"
					>
						<view class="grade-checkbox" :class="{ active: grade.selected }">
							<text v-if="grade.selected">✓</text>
						</view>
						<text class="grade-text">{{ grade.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 成绩分析 -->
			<view class="chart-area">
				<text class="chart-title">成绩分析</text>
				<view class="chart-box">
					<text class="chart-data">2023年12月20日</text>
					<text class="chart-data">我的成绩: 673</text>
					<text class="chart-data">年级平均分: 673</text>
					<text class="chart-data">班级平均分: 673</text>
				</view>
			</view>
			
			<!-- 历史成绩 -->
			<view class="history-table">
				<view class="table-head">
					<text class="head-cell">考试时间</text>
					<text class="head-cell">分数</text>
					<text class="head-cell">年级排名</text>
					<text class="head-cell">班级排名</text>
				</view>
				<view class="table-row" v-for="record in gradeRecords" :key="record.id">
					<text class="row-cell">{{ record.date }}</text>
					<text class="row-cell">{{ record.score }}</text>
					<text class="row-cell">{{ record.gradeRank }}</text>
					<text class="row-cell">{{ record.classRank }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import SubjectSelector from '@/components/SubjectSelector.vue';

export default {
	components: {
		SubjectSelector
	},
	data() {
		return {
			studentName: '王凯',
			selectedSubject: '全科',
			subjects: [
				{ id: 1, name: '全科', icon: '⚡', color: 'blue' },
				{ id: 2, name: '语文', icon: '📝', color: 'orange' },
				{ id: 3, name: '数学', icon: '📊', color: 'purple' },
				{ id: 4, name: '英语', icon: '📚', color: 'yellow' },
				{ id: 5, name: '物理', icon: '⚛️', color: 'green' },
				{ id: 6, name: '化学', icon: '🧪', color: 'red' },
				{ id: 7, name: '生物', icon: '🧬', color: 'teal' },
				{ id: 8, name: '政治', icon: '⭐', color: 'pink' },
				{ id: 9, name: '历史', icon: '📜', color: 'brown' },
				{ id: 10, name: '地理', icon: '🌍', color: 'cyan' }
			],
			grades: [
				{ id: 1, name: '五年级', selected: true },
				{ id: 2, name: '六年级', selected: true },
				{ id: 3, name: '七年级', selected: false },
				{ id: 4, name: '八年级', selected: false }
			],
			gradeRecords: [
				{ id: 1, date: '2025.02.20', score: 400, gradeRank: 5, classRank: 1 },
				{ id: 2, date: '2024.09.20', score: 400, gradeRank: 5, classRank: 1 },
				{ id: 3, date: '2024.02.20', score: 400, gradeRank: 5, classRank: 1 },
				{ id: 4, date: '2023.12.20', score: 400, gradeRank: 5, classRank: 1 }
			]
		};
	},
	onLoad(options) {
		console.log('页面参数:', options);
		if (options.student) {
			this.studentName = decodeURIComponent(options.student);
		}
		console.log('学生姓名:', this.studentName);
	},
	methods: {
		handleSubjectChange(subject) {
			// subject是对象，需要取其name属性
			this.selectedSubject = subject.name;
			console.log('选择科目:', subject.name);
		},
		
		toggleGrade(gradeId) {
			const grade = this.grades.find(g => g.id === gradeId);
			if (grade) {
				grade.selected = !grade.selected;
				console.log('切换年级:', grade.name, grade.selected);
			}
		}
	}
};
</script>

<style>
.page {
	min-height: 100vh;
	background: linear-gradient(135deg, #4DD0E1 0%, #81C784 100%);
	padding: 20rpx;
}

.test-content {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
}

.test-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 24rpx;
	display: block;
}

.grade-section {
	margin: 24rpx 0;
}

.grade-label {
	font-size: 24rpx;
	color: #333;
	margin-right: 16rpx;
}

.grade-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-top: 12rpx;
}

.grade-option {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.grade-checkbox {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #4DD0E1;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: #fff;
}

.grade-checkbox.active {
	background: #4DD0E1;
}

.grade-text {
	font-size: 24rpx;
	color: #333;
}

.chart-area {
	background: #f8f8f8;
	border-radius: 12rpx;
	padding: 20rpx;
	margin: 24rpx 0;
}

.chart-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 16rpx;
	display: block;
}

.chart-box {
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 20rpx;
	text-align: center;
}

.chart-data {
	display: block;
	font-size: 22rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.history-table {
	background: #f8f8f8;
	border-radius: 12rpx;
	overflow: hidden;
	margin-top: 24rpx;
}

.table-head {
	display: flex;
	background: #e0e0e0;
	padding: 20rpx 0;
}

.head-cell {
	flex: 1;
	text-align: center;
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
}

.table-row {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #ddd;
}

.table-row:last-child {
	border-bottom: none;
}

.row-cell {
	flex: 1;
	text-align: center;
	font-size: 24rpx;
	color: #333;
}
</style>